<template>
    <div class="w-full box-border">
        <el-card class="mg-b-16">
            <filterComponent v-model:filter-data="filterData" showUpload @doSearch="handleSearch"
                @upload="handleUpload" />
        </el-card>
        <el-card class="reset">
            <tableComponent class="set-height" theme="light" :table-header="tableHeader" :table-data="tableData"
                v-model:page-info="pageInfo" @pageChange="handlePageChange" @sort-change="sortMethod">
                <template #updateTime>
                    <el-table-column label="上传时间" width="170">
                        <template #default="scope">
                            <span class="orange">{{ dayjs(scope.row.updateTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                        </template>
                    </el-table-column>
                </template>
                <template #createTime>
                    <el-table-column label="创建时间" width="170">
                        <template #default="scope">
                            <span class="orange">{{ dayjs(scope.row.createTime).format('YYYY-MM-DD hh:mm:ss') }}</span>
                        </template>
                    </el-table-column>
                </template>
                <template #openAmount>
                    <el-table-column label="原始发票金额" width="110">
                        <template #default="scope">
                            <span v-if="scope.row.openAmount || scope.row.openAmount === 0"
                                :class="{ 'fc-red': scope.row.openAmount && scope.row.syncAmount && (scope.row.openAmount !== scope.row.syncAmount) }">{{ scope.row.openAmount }}</span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                </template>

                <template #preview>
                    <el-table-column label="发票预览" width="80">
                        <template #default="scope">
                            <el-button v-if="scope.row.invoiceUrl" type="primary" link
                                @click="handlePreview(scope.row)">预览</el-button>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                </template>

                <template #syncAmount>
                    <el-table-column label="应用月份金额" width="110">
                        <template #default="scope">
                            <span v-if="scope.row.syncAmount || scope.row.syncAmount === 0"
                                :class="{ 'fc-red': scope.row.openAmount && scope.row.syncAmount && (scope.row.openAmount !== scope.row.syncAmount) }">{{ scope.row.syncAmount }}</span>
                            <span v-else>--</span>
                        </template>
                    </el-table-column>
                </template>

                <template #auditStatus>
                    <el-table-column label="状态">
                        <template #default="scope">
                            <span :class="{ [`active-${scope.row.auditStatus}`]: true }">{{
                                statusName(scope.row.auditStatus)
                                }}</span>
                        </template>
                    </el-table-column>
                </template>
                <template #operate>
                    <el-table-column width="70" label="操作" fixed="right">
                        <template #default="scope">
                            <el-button type="primary" link @click="handleClick(scope.row)">处理</el-button>
                        </template>
                    </el-table-column>
                </template>
            </tableComponent>
        </el-card>
    </div>
    <DialogUpload v-model:show="showDialog" @refresh="handleSuccess" />
    <previewDialog v-model:show="showPreview" v-model:url="previewUrl" />
    <DialogRedo v-model:show="showRedo" :show-date="showDate" v-model:month="curMonth" :list="errorList"
        @success="handleSuccess" />
</template>
<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import filterComponent from '@/components/filterComponent/index.vue'
import tableComponent from '@/components/tableComponent/index.vue'
import baseurl from '@/api/env'

import { promiotionList, recordExport } from '@/api/activity/index.ts'
import DialogUpload from './DialogUpload.vue'
import { recordList, syncInvoice, needSyncInvoiceList } from '@/api/approval/upload.ts'
import previewDialog from '@/components/previewDialog/index.vue'
import DialogRedo from './DialogRedo.vue'

import dayjs from 'dayjs'
const props = defineProps({
    companyId: {
        type: [Number, String]
    },
    insureType: {
        type: String,
        default: 'day'
    }
})

const showDate = ref(false)
const curMonth = ref('')

const filterData = ref({
    list: {
        companyName: {
            name: '企业名称',
            prop: 'companyName',
            value: '',
            placeholder: '请输入企业名称',
            type: 'input',
            inputType: 'text',
            handleFocus: (item) => {

            },
            handleChange: (item) => {

            },
            handleInput: (item) => {

            }
        },
        type: {
            name: '发票类型',
            prop: 'type',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '日日保',
                    value: 0
                },
                {
                    label: '电子签',
                    value: 2
                },
                {
                    label: '长期保',
                    value: 3
                },
                {
                    label: '发薪专户',
                    value: 4
                },
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {
            },
            handleChange: (item) => {
            }
        },
        isSync: {
            name: '是否同步',
            prop: 'isSync',
            value: '',
            placeholder: '请选择',
            type: 'select',
            options: [
                {
                    label: '全部',
                    value: ''
                },
                {
                    label: '否',
                    value: 0
                },
                {
                    label: '是',
                    value: 1
                }
            ],
            defaultAttrs: {
                label: 'label',
                value: 'value'
            },
            handleFocus: (item) => {
            },
            handleChange: (item) => {
            }
        },
        month: {
            name: '应用月份',
            type: 'date',
            dateType: 'month',
            value: '',
            valueFormat: 'YYYY-MM',
        }
    },
    buttonList: [
        {
            icon: '',
            name: '批量处理',
            click: () => {
                showDate.value = true
                getErrorList()
            }
        }
    ]
})

const pageInfo = ref({
    pageNum: 1,
    pageSize: 10,
    total: 0
})

const tableData = ref([])

const tableHeader = ref([
    {
        label: '企业名称',
        prop: 'companyName',
    },
    {
        label: '发票标识号',
        prop: 'invoiceNo',
    },
    {
        label: '发票名称',
        prop: 'invoiceName',
    },
    {
        label: '上传时间',
        prop: 'updateTime',
    },
    {
        label: '是否同步',
        prop: 'isSync',
        map: {
            0: '否',
            1: '是'
        }
    },
    {
        label: '发票类型',
        prop: 'type',
        map: {
            0: '日日保',
            2: '电子签',
            3: '长期保',
        }
    },
    {
        label: '原始发票金额',
        prop: 'openAmount',
    },
    {
        label: '应用月份',
        prop: 'invoiceMonth',
        width: 150
    },
    {
        label: '应用月份金额',
        prop: 'syncAmount',
    },
    {
        label: '预览',
        prop: 'preview',
    },
    {
        label: '创建时间',
        prop: 'createTime',
    },

    {
        label: '操作',
        prop: 'operate'
    }
])

const showDialog = ref(false)


const createParams = (hasPage = true) => {
    const data = {}
    if (hasPage) {
        data.pageNum = pageInfo.value.pageNum
        data.pageSize = pageInfo.value.pageSize
    }
    for (const key in filterData.value.list) {
        data[key] = filterData.value.list[key].value
    }
    return data
}

const getData = () => {
    recordList(createParams()).then(res => {
        tableData.value = res.list
        pageInfo.value.total = res.totalCount ?? res.total
    })
}

const handleSearch = () => {
    getData()
}

const handleUpload = () => {
    showDialog.value = true
}

const showPreview = ref(false)
const previewUrl = ref('')
const handlePreview = (row) => {
    previewUrl.value = row.invoiceUrl
    showPreview.value = true
}

const showRedo = ref(false)
const errorList = ref([])
const handleClick = (row) => {
    showDate.value = false
    errorList.value = []
    errorList.value.push(row)
    showRedo.value = true
}

const handleSuccess = () => {
    pageInfo.value.pageNum = 1
    getData()
}
const handlePageChange = (ev) => {
    pageInfo.value.pageNum = ev.pageNum
    pageInfo.value.pageSize = ev.pageSize
    getData()
}

const getErrorList = () => {
    needSyncInvoiceList({
        isSync: 0,
        month: curMonth.value
    }).then(res => {
        // if (res?.length) {
        errorList.value = res || []
        showRedo.value = true
        // } else {
        //     ElMessage.warning('暂时没有待处理的发票')
        // }
    })
}

watch(curMonth, (newval) => {
    console.log(123, newval)
    getErrorList()
}, {
    deep: true
})
defineExpose({
    getData
})
</script>
<style lang="scss" scoped>
</style>
